import * as React from 'react';
import { View, Text, StyleSheet, Button, TouchableOpacity, Alert } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen(prop) {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>Home Screen</Text>
      <Button title={'to News Screen'} onPress={()=>{
          prop.navigation.navigate('News')
      }}/>
    </View>
  );
}

function NewsScreen(prop) {
    return (
      <View style={[styles.container]}>
        <Text style={[styles.text]}>News Screen</Text>
        <Button title={'to Home Screen'} onPress={()=>{
            prop.navigation.navigate('Home')
        }}/>
      </View>
    );
  }

const Stack = createStackNavigator();

function App() {
  return (
      <Stack.Navigator 
        initialRouteName='Home' //初始加载的页面
        // headerMode='none' //隐藏导航栏的标题栏
      >
        <Stack.Screen name="Home" component={HomeScreen} options={
            {
                title: '首页', //导航栏的标题
                headerStyle: {
                    backgroundColor: 'tomato', //导航栏的背景颜色
                },
                headerRight: () => (
                    <TouchableOpacity style={{marginRight: 10}} onPress={()=>{
                        Alert.alert('提示', '确定要退出吗？', [
                            {text: '取消', onPress: () => console.log('cancel')},
                            {text: '确定', onPress: () => console.log('ok')}
                        ])
                    }}>
                        <Text style={{color: 'white', fontSize: 18}}>退出</Text>
                    </TouchableOpacity>
                )
            }
        } />
        <Stack.Screen name="News" component={NewsScreen} />
      </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text:{
        fontSize: 20,
    }
})

export default App;